Box Model（盒模型）
box model 合模型，在 HTML 裡一個很基礎且重要的一個環節，只要 box model 學得好的話，排版可以排得很整齊，能提升網站使用者體驗，所以必須要了解並熟練。
我們用這張圖來解釋 box model
首先我們寫一個 div 寬 300px 高 300px，這是 div 本身的實體大小，接下來我們再加 padding: 50px 四邊內部留白，以及 border: 10px 四邊實線，然後再加向四邊外推 margin: 50px，最後就是來算我們 div 實體跟網頁上空間占多少大小。
div 實體大小
寬: 300px + 50px * 2px + 10px * 2px = 420px
高: 300px + 50px * 2px + 10px * 2px = 420px
總實體大小: 420px * 420px
網頁空間大小
寬: 420px + 50px * 2px = 520px
高: 420px + 50px * 2px = 520px
總網頁空間大小: 520px * 520px
這裡為什麼是 50px * 2px 跟 10px * 2px，原因是寬高兩邊都有各加 50px 跟 10px，所以試乘以 2。
margin 0 auto 區塊水平置中
margin 0 auto 它已經是寫網頁必用的一個 CSS 語法，功用是讓區塊水平置中，什麼要這麼做呢？
主要是讓使用者能有比較好閱讀體驗，假如一個網站內容幾乎是滿版的話，會對使用者在閱讀上會比較吃力且不清晰，而我們加上 margin 0 auto 把內容集中在中間，閱讀體驗就能比較順暢清晰，所以業界大部分網站都會這樣設定，來增加使用者體驗。
補充： 我們在寫網頁時盡量不要把高度寫死，因為你不知道一個網站內容有多長，或是什麼時候會加新內容，如果寫死高度你的內容超過設定好高度的區塊，版型它就會跑掉變得很奇怪，所以高度會讓內容自適應，除非你那區塊是固定沒有要更動就可以寫死高度。
HTML
<div class="wrap">
<div class="header"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid eos, nam error ad laborum perspiciatis
dolore? Assumenda, beatae saepe!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid eos, nam error ad laborum perspiciatis
dolore?
Assumenda, beatae saepe!</p>
</div>
<div class="footer"></div>
</div>
CSS
.wrap {
width: 500px;
background: black;
margin: 0 auto;
}
.header {
height: 50px;
background: red;
}
.content {
background: blue;
padding: 20px;
}
.content p {
color: white;
margin-bottom: 30px;
}
.footer {
height: 50px;
background: pink;
}
呈現畫面
text-align 文字水平調整
text-align 功用是調整文字水平的位置，像是文字靠左、文字置中、文字靠右，排版會蠻常用到。
語法:
text-align: left; // 文字靠左
text-align: center; // 文字置中
text-align: right; // 文字靠右
HTML
<div class="wrap">
<div class="header"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid eos, nam error ad laborum perspiciatis
dolore? Assumenda, beatae saepe!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid eos, nam error ad laborum perspiciatis
dolore?
Assumenda, beatae saepe!</p>
</div>
<div class="footer">
<p>
地址:高雄市前鎮區33號
<br>
tel: (07)3345678
</p>
</div>
</div>
CSS
.wrap {
width: 500px;
background: black;
margin: 0 auto;
}
.header {
height: 50px;
background: red;
}
.content {
background: blue;
padding: 20px;
}
.content p {
color: white;
margin-bottom: 30px;
}
.footer {
background: pink;
padding: 10px 0;
text-align: center;
}
呈現畫面
box-sizing
假如我們不想算 box model 的推擠，可以使用 box-sizing 來讓它自己計算，不過呈現出來效果會跟 box model 不一樣，
box-sizing 是直接拿實體大小自己去算有加 padding 跟 border 的尺寸，而 box model 是實體大小外加 padding 跟 border 的尺寸，如果兩個寬高設定一樣，所呈現出來的效果會是不一樣，我們來看看範例。
補充：如果我們要設定全部網站都可以吃到 CSS 效果的語法是
*, *:before, *:after { ... }
HTML
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
CSS
.box1 {
background-color: black;
width: 50px;
height: 50px;
padding: 10px;
border: 10px solid blue;
box-sizing: border-box;
}
.box2 {
background-color: black;
width: 50px;
height: 50px;
padding: 10px;
border: 10px solid blue;
}
呈現畫面
